<script setup>
import ShortCut2 from "@/components/ShortCut2.vue";
import { useShopcartStore } from "@/stores/shopcart";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const shopcartStore = useShopcartStore();
shopcartStore.getShopcart();

// 结算
const doPay = () => {
  // 检查是否有选中的商品
  if (shopcartStore.checkGoods.length === 0) {
    ElMessage({
      message: '请先选择要购买的商品',
      type: 'warning'
    });
    return;
  }
  
  // 跳转到确认订单页
  router.push("/confirmOrder");
};
</script>

<template>
  <div>
    <ShortCut2></ShortCut2>
    <div class="app-container" id="app">
      <div class="shoppingProcedure">
        <span class="current">我的购物车</span>
        <span>填写核对订单信息</span>
        <span>成功提交订单</span>
      </div>

      <!-- 面包屑 -->
      <div class="breadcrumb">
        <span>🏠</span>
        /
        <span>购物车</span>
      </div>
      <!-- 购物车主体 -->
      <div class="main" v-if="shopcartStore.shopcartList.length > 0">
        <div class="table">
          <div class="shoppingTitle">
            <ul>
              <li class="f1">
                选择框
              </li>
              <li class="f2">图书名称</li>
              <li class="f3">定价（元）</li>
              <li class="f4">数量操作</li>
              <li class="f5">小计（元）</li>
              <li class="f6">操作</li>
            </ul>
          </div>
          
          <div
            class="shoppingList clearfix"
            v-for="item in shopcartStore.shopcartList"
            :key="item.cart_id"
          >
            <div class="fl">
              <input
                type="checkbox"
                class="selectAll"
                :checked="shopcartStore.checkId.includes(item.cart_id)"
                @change="shopcartStore.editCartState(item.cart_id)"
              />
            </div>
            <div class="goodImg fl">
              <a href="#">
                <img
                  :src="item.img"
                  :alt="item.bookname"
                  class="lazyImg"
                />
              </a>
            </div>
            <div class="goodName fl">
              <a :title="item.bookname" href="#"
                >{{item.bookname}}<br />
              </a>
            </div>
            <div class="f3 fl"><strong>¥{{item.price}}</strong></div>
            <div class="f4 fl">
              <div class="quantityForm">
                <button
                  class="decrease"
                  :disabled="item.num <= 1"
                  @click="shopcartStore.subCartNum(item.cart_id)"
                >
                  -
                </button>
                <input
                  autocomplete="off"
                  type="text"
                  max="99"
                  min="1"
                  shopcount="#"
                  :value="item.num"
                  @change="shopcartStore.updateCartNum(item.cart_id, $event.target.value)"
                />
                <button
                  class="increase"
                  @click="shopcartStore.addCartNum(item.cart_id)"
                >
                  +
                </button>
              </div>
            </div>
            <div class="f5 fl">
              <strong class="subtotal">¥{{ (item.price * item.num).toFixed(2) }}</strong>
            </div>
            <div class="f6 fl delete">
              <a class="goodRemove" href="javascript:void(0);" @click="shopcartStore.delShopcart(item.cart_id)">删除</a>
            </div>
          </div>

        </div>

        <div class="myf clearfix">
          <em>运费</em>
          <p>已免运费</p>
        </div>
        <div class="shoppingfootWrap full_car show" id="shoppingfootWrap">
          <div class="shoppingfootinner">
            <div class="shoppingFoot clearfix">
              <div class="shoppingFootLeft fl clearfix">
                <div class="Checkbox fl">
                  <input type="checkbox" class="selectAll f11" v-model="shopcartStore.isAllchecked"/>全选
                </div>
                <div class="removeGood fl">
                  <a href="javascript:void(0)">删除选中的商品</a>
                </div>
                <div class="removeGood fl">
                  <a href="javascript:void(0)">清除下架或缺货商品</a>
                </div>
                <div class="removeGood fl">
                  <a href="javascript:void(0)" class="J_clear">清理购物车</a>
                </div>
              </div>
              <div class="shoppingFootRight fr">
                <div class="fl shoppingResult">
                  <div class="result">
                    已选择<span>{{ shopcartStore.totalCount }}</span>件商品，商品总金额<span class="money"
                      >¥</span
                    ><b>{{ shopcartStore.totalPrice.toFixed(2) }}</b>
                  </div>
                </div>
                <div class="submitBtn fl cur">
                  <a @click="doPay">立即结算</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="empty" v-else>🛒空空如也</div>
    </div>
  </div>
</template>

<style scoped>
.app-container {
  width: 1000px;
  margin: 0 auto;
}
.shoppingProcedure {
  width: 617px;
  height: 36px;
  line-height: 36px;
  overflow: hidden;
  background: url("/src/assets/shoppingProcedure.png") no-repeat left center;
  margin: 28px 0px;
}
.shoppingProcedure span.current {
  color: #fff;
}
.shoppingProcedure span {
  float: left;
  width: 204px;
  height: 36px;
  color: #666;
  font-size: 14px;
  text-align: center;
  padding: 0px 0px 0px 20px;
}
.shoppingTitle {
  border: 1px solid #e4e4e4;
  height: 38px;
}
.shoppingTitle ul {
  overflow: hidden;
  line-height: 38px;
}
.shoppingTitle ul li {
  overflow: hidden;
  float: left;
  color: #666;
}
.f1 {
  width: 127px;
  overflow: hidden;
}
.selectAll {
  cursor: pointer;
  margin: 12px 50px 30px 13px;
  float: left;
  height: 14px;
  width: 14px;
  /* text-indent: 999px; */
  overflow: hidden;
  display: inline;
}
.f11 {
  margin: 25px 5px 15px 13px;
}
.f2 {
  width: 230px;
}
.f3 {
  width: 175px;
}
.f4 {
  width: 175px;
}
.f5 {
  width: 160px;
}
.f6 {
  width: 80px;
}
.shoppingList {
  border: 1px solid #d6d6d6;
  margin: 15px 0;
}
.shoppingList > div {
  margin-top: 36px;
  height: auto;
}

.shoppingList:last-child {
  border-bottom: none;
}
.shoppingList .cartCheckbox {
  width: 50px;
}
.fl {
  float: left;
}
.shoppingList .goodImg {
  background: #fff;
  border: 1px solid #e4e4e4;
  height: 86px;
  width: 86px;
  text-align: center;
  position: relative;
  margin-top: 10px;
}
.shoppingList .goodImg a {
  display: block;
  padding: 3px 0px;
}
.shoppingList .goodImg img {
  height: 80px;
  width: 70px;
  max-width: 80px;
}
.shoppingList .goodName {
  width: 195px;
  padding-left: 15px;
  padding-right: 42px;
  line-height: 20px;
  height: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: table;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.shoppingList .goodName a {
  color: #333;
  display: table-cell;
  /* vertical-align: middle; */
}

.shoppingList .goodQuantity {
  padding-top: 25px;
  padding-left: 45px;
  width: 99px;
  padding-right: 60px;
  text-align: center;
}
.shoppingList .goodQuantity .quantityForm {
  padding-top: 10px;
  overflow: hidden;
}
.quantityForm button {
  float: left;
  height: 22px;
  width: 21px;
  line-height: 20px;
  text-align: center;
  background: #fff;
  border: 1px solid #d6d6d6;
  color: #333;
}
.quantityForm input {
  float: left;
  width: 42px;
  border: 1px solid #d6d6d6;
  line-height: 20px;
  border-left: none;
  border-right: none;
  text-align: center;
  height: 20px;
  vertical-align: middle;
  color: #333;
}
.subtotal {
  color: #ff2832;
}
.goodRemove {
  outline: 0;
  color: #fff;
  background: #d9363e;
  border-color: #d9363e;
  line-height: 1.5715;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: 1px solid transparent;
  box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 2px;
}

/* 底部//////////////////////////// */
.myf {
  width: 1000px;
  margin: 16px auto 0 auto;
  line-height: 20px;
}
.clearfix {
  zoom: 1;
  display: block;
}
.myf em {
  width: 32px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  margin: 0 15px 0 0;
  background: #e4e4e4;
  display: block;
  float: left;
}
.full_car.show {
  display: block;
}
.shoppingfootWrap {
  width: 100%;
  margin-top: 16px;
  background: #e5e5e5;
  padding: 9px 0px;
}
.full_car {
  display: none;
}
.shoppingFoot {
  width: 998px;
  margin: auto;
  background: #fafafa;
  height: 60px;
}
.shoppingFoot .shoppingFootLeft {
  height: 60px;
  line-height: 60px;
}
.shoppingFoot .shoppingFootLeft .Checkbox {
  width: 75px;
  color: #333;
}
.shoppingFoot .shoppingFootLeft .removeGood {
  padding-left: 19px;
}
.shoppingFoot .shoppingFootLeft .removeGood a {
  color: #333;
}
.shoppingFoot .shoppingFootLeft .removeGood a.J_clear {
  background-color: #f8e0e1;
  color: #ff2832;
  text-align: center;
  border-radius: 11px;
  padding: 3px 11px;
}

.shoppingFoot .shoppingFootRight {
  height: 60px;
}
.fr {
  float: right;
}
.shoppingFoot .shoppingFootRight .shoppingResult {
  height: 60px;
  padding-right: 30px;
}
.shoppingFoot .shoppingFootRight .shoppingResult .result {
  height: 30px;
  color: #333;
  line-height: 30px;
  text-align: right;
}
.result span {
  font-size: 14px;
  color: #e31436;
  padding: 0px 5px;
}
.result .money {
  font-size: 18px;
  padding-right: 0px;
}
.result b {
  color: #e31436;
  font-size: 18px;
}

.shoppingFoot .shoppingFootRight .submitBtn {
  cursor: pointer;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 164px;
  color: #fff;
  background: #b0b0b0;
  font-size: 22px;
}
.shoppingFoot .shoppingFootRight .submitBtn.cur {
  color: #fff;
  background: #ff2832;
}
.submitBtn a {
  color: #fff;
}
</style>
